<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
              <span>
                <user-outlined />
                员工菜单
              </span>
          </template>
          <a-menu-item key="1">
            <router-link to="/emp1">员工页面1</router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/emp2">员工页面2</router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/emp3">员工页面3</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
              <span>
                <laptop-outlined />
                部门经理菜单
              </span>
          </template>
          <a-menu-item key="4">
            <router-link to="/man1">部门经理页面1</router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <router-link to="/man2">部门经理页面2</router-link>
          </a-menu-item>
          <a-menu-item key="6">
            <router-link to="/man3">部门经理页面3</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
              <span>
                <notification-outlined />
                总经理菜单
              </span>
          </template>
          <a-menu-item key="7">
            <router-link to="/boss1">总经理菜单1</router-link>
          </a-menu-item>
          <a-menu-item key="8">
            <router-link to="/boss2">总经理菜单2</router-link>
          </a-menu-item>
          <a-menu-item key="9">
            <router-link to="/boss3">总经理菜单3</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout style="padding: 0 24px 24px">
      <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
export default {
  name: "HomeView",
  data(){
    return{
      selectedKeys2: ['1'],
      collapsed: false,
      openKeys: ['sub1'],
    }
  }
}
</script>

<style scoped>

</style>